<template>
  <div class="w-1116px flex flex-col items-center cursor-pointer">
    <h2 class="mt-12px w-1102px text-28px font-bold text-#242633">優質陪玩師推薦</h2>
    <div class="mt-20px w-1146px h-180px relative">
      <button
        v-if="userListDataWithSplice?.length > 1"
        class="absolute left-0 top-[50%] translate-y-[-50%] w-44px h-44px flex items-center justify-center bg-#bg01 z-2 rounded-[50%] swiper-button-prev2"
      >
        <img class="w-25px h-25px" src="@/assets/left1.svg" alt="" />
      </button>
      <button
        v-if="userListDataWithSplice?.length > 1"
        class="absolute right-0 top-[50%] translate-y-[-50%] w-44px h-44px flex items-center justify-center bg-#bg01 z-2 rounded-[50%] swiper-button-next2"
      >
        <img class="w-25px h-25px" src="@/assets/right1.svg" alt="" />
      </button>

      <Swiper
        :modules="[Navigation]"
        :slides-per-view="1"
        :space-between="0"
        :loop="userListDataWithSplice?.length > 1"
        :navigation="navigation"
        @slideChange="handleSildeChange"
      >
        <swiper-slide v-for="(list, index) in userListDataWithSplice" :key="index">
          <div class="w-1146px h-180px px-22px box-border flex flex-row justify-between">
            <div
              class="group w-542px h-180px rounded-16px bg-gradient-to-b from-#6572AD to-#2D3566 p-10px box-border flex flex-row relative z-0"
              v-for="(item, idx) in list"
              :key="idx"
              @click="handelGotoUserDetail(item.user_id)"
            >
              <img
                src="@/assets/bg.png"
                alt=""
                class="absolute inset-y-0 right-0 w-180px h-180px z-0"
              />
              <div class="w-160px h-160px rounded-12px relative overflow-hidden">
                <div class="ant-image" style="width: 160px; height: 160px">
                  <img
                    class="object-cover transform group-hover:scale-105 transition"
                    :src="item.header_img"
                    style="height: 160px"
                  /><!----><!---->
                </div>
                <!---->
                <div
                  class="absolute top-4px left-4px bg-#16D6B5 border border-white rounded-11px w-[fit-content] h-18px px-6px box-border flex flex-row items-center"
                >
                  <div class="w-4px h-4px rounded-50% bg-white"></div>
                  <div class="ml-4px text-12px font-500 text-white">在線</div>
                </div>
              </div>
              <div class="ml-22px w-338px h-160px flex flex-col">
                <div class="mt-6px w-full h-20px flex flex-row items-center">
                  <div
                    class="w-300px text-20px h-20px leading-20px font-bold text-white whitespace-nowrap"
                  >
                    {{ item.nick_name }}
                  </div>
                  <div class="flex-1"></div>
                  <img src="@/assets/xx.png" alt="" class="w-12px h-12px" />
                  <div class="ml-4px text-14px font-bold text-white">{{ item.score }}</div>
                </div>
                <div
                  class="mt-12px w-338px text-14px min-h-30px font-500 text-#C3C8DF leading-18px line-clamp-2 whitespace-pre-wrap overflow-hidden"
                >
                  {{ item.game_info }}
                </div>
                <div class="mt-22px flex flex-row">
                  <div class="w-46px h-58px rounded-8px border border-#5C68A3 overflow-hidden">
                    <img :src="item.game_image" alt="" class="w-full h-full object-cover" />
                  </div>
                  <div class="ml-10px flex flex-col">
                    <div class="mt-6px h-18px leading-18px text-18px font-500 text-white">
                      {{ item.game_name }}
                    </div>
                    <div class="mt-10px h-18px flex flex-row items-end">
                      <img src="@/assets/money.png" alt="" class="w-18px h-18px" />
                      <div class="ml-4px h-18px leading-18px text-18px font-bold text-#FFBB33">
                        {{ item.gold_coin }}
                      </div>
                      <div class="ml-1px h-11px leading-11px text-11px font-500 text-#C3C8DF">
                        /{{ getPlayTime(item) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </Swiper>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { getHotUserSkills } from '@/api/user'
const router = useRouter()

import 'swiper/css'

const userListData = ref([])
const userListDataWithSplice = computed(() => {
  const lineCount = 2
  let arr = []
  userListData.value.forEach((img, index) => {
    const idx = Math.floor(index / lineCount)
    if (!arr[idx]) arr[idx] = []
    arr[idx].push(img)
  })
  return arr
})
const handelGotoUserDetail = (id) => {
  router.push({ name: 'User', params: { id } })
}
const getPlayTime = (skill) => {
  const time = (skill.play_time === 1 ? '' : skill.play_time) ?? ''
  if (skill?.type == 0) {
    return time + '分钟'
  }
  if (skill?.type == 1) {
    return time + '局'
  }
  if (skill?.type == 2) {
    return time + '天'
  }
}
const activeId = ref(0)
const handleSildeChange = (e) => {
  activeId.value = userListDataWithSplice.value[e.activeIndex]?.[0]?.id || 0
}
const navigation = ref({
  nextEl: '.swiper-button-next2',
  prevEl: '.swiper-button-prev2'
})
onMounted(() => {
  getHotUserSkills().then((res) => {
    userListData.value = res
  })
})
// }
</script>

<style></style>
